<!-- 从业者端-我的-求职意向-->
<template>
	<view class="container">
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 提交的this.$refs.form.validate验证，一定是需要有form标签的ref="form"来对应的，否则会报错 -->
			<u-form :model="form" ref="form">

				<!-- picker弹窗 -->
				<u-picker v-model="pickerShow" :mode="mode" :range="range" @confirm="confirm"></u-picker>

				<!-- 求职状态 -->
				<view class="form-section">
					<u-form-item label="求职状态" prop="Culture" label-width="190">
						<u-input v-model="form.status" placeholder="请选择求职状态" clearable @click="showChange('status')" :focus="false"  disabled />
					</u-form-item>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
				<!-- 				//期望职位
				<view class="form-section">
					<u-form-item label="期望职位" prop="Culture" label-width="240">
						<u-input v-model="form.position" placeholder="请选择期望职位" clearable @click="showChange('position')" />
					</u-form-item>
				</view> -->

				<!-- 期望职位选择 -->
				<view class="select-box" >
					<view class="select-label">
						<text class="label">期望职位</text>
					</view>
					<view class="select-input" @click="showChange('position')">
						<view class="tags-container">
							<view class="tag" v-for="(item, index) in form.position" :key="index">
								<text>{{ item }}</text>								
								<view class="delete-btn" @tap.stop="removePosition(index)">
									<!-- 为了阻止事件向父标签冒泡，使用@top.stop -->
									<u-icon name="close" size="16" color="#999" ></u-icon>
									<!-- <u-icon name="close" size="16" color="#999"></u-icon> -->
								</view>
								
							</view>
							<text class="placeholder" v-if="form.position.length === 0">请多选择期望职位</text>
						</view>
					</view>
					<view class="">
						<u-icon name="arrow-right" color="#999"></u-icon>
					</view>
				</view>

				<!-- 工作城市 -->
				<!-- 				<view class="form-section">
					<u-form-item label="工作城市" prop="selectRegion" label-width="190">
						<u-input v-model="form.selectRegion" placeholder="请选择工作城市" clearable @click="showChange('region')" />
					</u-form-item>
				</view> -->

				<!-- 工作城市 -->
				<view class="select-box">
					<view class="select-label">
						<text class="label">工作城市</text>
					</view>
					<view class="select-input" @click="showChange('region')">
						<view class="tags-container">
							<view class="tag" v-for="(item, index) in form.selectRegion" :key="index">
								<text>{{ item }}</text>
								<view class="delete-btn" @tap.stop="removeRegion(index)">
									<!-- 为了阻止事件向父标签冒泡，使用@top.stop -->
									<u-icon name="close" size="16" color="#999" ></u-icon>
									<!-- <u-icon name="close" size="16" color="#999"></u-icon> -->
								</view>
							</view>
							<text class="placeholder" v-if="form.selectRegion.length === 0">请多选择工作城市</text>
						</view>
					</view>
					<view class="">
						<u-icon name="arrow-right" color="#999"></u-icon>
					</view>
				</view>


				<!-- 期望薪资 -->
				<view class="form-section">
					<u-form-item label="期望薪资" prop="Culture" label-width="190">
						<u-input v-model="form.salary" placeholder="请选择期望薪资" clearable @click="showChange('salary')" :focus="false"  disabled />
					</u-form-item>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>



				<!-- 按钮组 -->
				<view class="button-group">
					<!-- 					<u-button type="default" @click="handlePrev" shape="circle" :custom-style="customStyleObject">
						上一步
					</u-button> -->
					<u-button type="primary" @click="handleNext" shape="circle" :loading="loading">
						保存
					</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 日历 
				show: false,
				activeBgColor: '#2979ff',
				btnType: "primary",
				inputType: "", //判断是哪个选择项

				// picker弹窗
				pickerShow: false,
				mode: "selector",
				range: ['硕士生以上', '硕士', '本科', '专科'],
				loading: false,
				value: '男',
				form: {
					selectRegion: [], //所在地区
					status: '', //求职状态
					position: [], //期望职位
					salary: '' //期望薪资
				},
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
				},
				
				// 字典项处理
				dictNode:[], ///字典根项
				jobName: [], ///岗位名称
				jobClassfiy: [], ///岗位类型
				moneyName: [], ////薪资范围
				jinyan: [], ///经验要求
				tmpItem: {}, //临时存储ITEM项
				returnItem: [], ////临时存储返回项
				// 字典项处理结束
				
			}
		},
		onShow() {
			// 获取个人简历的求职信息
			this.selectQzInfo()
			// 获取字典根项
			this.selectdictNode()
		},
		methods: {
			// 获取个人简历的求职信息
			selectQzInfo() {
				this.$u.api.queryjlsimple({
					"usercode": uni.getStorageSync('usercode'),
				}).then(res => {
					console.log('个人缩减信息：', res);
					let base_info = res.data.base_info.qz;
					// 方法2：合并更新
					this.form = {}
					Object.assign(this.form, {
							status: base_info.jlqz_qiuzstate, ///求职状态
							salary: base_info.jlqz_xzyq, ///期望薪资
					});
					this.form.selectRegion = []
					this.form.selectRegion = base_info.jlqz_workcity
					this.form.position = []
					this.form.position = base_info.jlqz_qwzw
					console.log('个人缩减信息-1：', this.form);
				})
			},
			// 加载字典开始
			selectdictNode() {
				this.$u.api.querydict({
					"dictcode": "0"
				}).then(res => {
					console.log('根项字典',res)
					this.dictNode = res.data.base_info
					this.selectItem()
				})
			},
			// 查询字典项
			async selectItem() {
				// 查询求职状态
				this.tmpItem = {} 
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '求职状态')
				let returnItemjobName = []
				returnItemjobName = await this.selectItemApi(this.tmpItem[0].dict_code)				
				for(let i= 0; i < returnItemjobName.length; i++) {
					this.jobName.push(returnItemjobName[i].dict_name)
				}
				// 岗位
				this.tmpItem = {}
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '岗位')
				let returnItemjobClassfiy = []
				returnItemjobClassfiy = await this.selectItemApi(this.tmpItem[0].dict_code)				
				for(let i= 0; i < returnItemjobClassfiy.length; i++) {
					this.jobClassfiy.push(returnItemjobClassfiy[i].dict_name)
				}
				// 薪酬范围
				this.tmpItem = {}
				this.tmpItem = this.dictNode.filter(item => item.dict_name == '薪酬范围')
				let returnItemmoneyName = []
				returnItemmoneyName = await this.selectItemApi(this.tmpItem[0].dict_code)				
				for(let i= 0; i < returnItemmoneyName.length; i++) {
					this.moneyName.push(returnItemmoneyName[i].dict_name)
				}
				// 经验要求
				// this.tmpItem = {}
				// this.tmpItem = this.dictNode.filter(item => item.dict_name == '经验要求')
				// let returnItemjinyan = []
				// returnItemjinyan = await this.selectItemApi(this.tmpItem[0].dict_code)				
				// 	this.jinyan.push(returnItemjinyan[i].dict_name)
				// for(let i= 0; i < returnItemjinyan.length; i++) {
				// }
				console.log('tmpItem-1:', this.jobName);
							
			},
			
			selectItemApi(itemcode) {
				return this.$u.api.querydict({
					"dictcode": itemcode
				}).then(res => res.data.base_info)	
			},
			// 加载字典结束
			
			// Picker弹窗
			showChange(type) {
				if (type == 'status') {
					// 求职状态
					this.mode = 'selector';
					// this.range = ['离职-在找机会', '在职-在找机会', '在职-不考虑'];
					this.range = this.jobName
					this.inputType = type;
					this.pickerShow = !this.pickerShow;
				} else if (type == 'position') {
					// 学历
					this.mode = 'selector';
					this.inputType = type;
					// this.range = ['康养师', '工程师', '护理师', '护理工程师'];
					this.range = this.jobClassfiy
					this.pickerShow = !this.pickerShow;
				} else if (type == 'salary') {
					this.mode = 'selector';
					this.inputType = type;
					// this.range = ['3000-5000', '5000-1W', '1W-1.5W', '1.5W以上'];
					this.range = this.moneyName
					this.pickerShow = !this.pickerShow;
				} else {
					// 地区region					
					this.mode = type;
					this.inputType = type;
					this.pickerShow = !this.pickerShow;
				}

			},

			// 日历选择
			change(e) {
				// 赋值给相应的输入执照起始日期
				this.form.startDate = e.result;
			},

			// picker选择选择确认
			confirm(e) {
				if (this.inputType == 'status') {
					// 赋值职业状态
					this.form.status = this.range[e[0]];

				} else if (this.inputType == 'position') {
					// 赋值期望职业
					// this.form.position = this.range[e[0]];
					this.form.position.push(this.range[e[0]])
					// 多选期望职业
					// for (let i = 0; i < e.length; i++) {
					//   // const index = e[i]
					//   this.form.position.push(this.range[e[0]])
					// }

				} else if (this.inputType == 'salary') {
					// 赋值期望职业
					this.form.salary = this.range[e[0]];

				} else {
					// 多选赋值地区
					// this.form.selectRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;
					// this.form.selectRegion = e.province.label + e.city.label;
					this.form.selectRegion.push(e.province.label + e.city.label)
				}
			},

			// 上一步
			handlePrev() {
				uni.navigateBack();
			},

			// 保存
			handleNext() {
				console.log('求职-1：',this.form)
				this.$u.api.createjlqz({
					"usercode": uni.getStorageSync('usercode'),
					"jlqzqiuzstate": this.form.status,
					"jlqzqwzw": this.form.position,
					"jlqzworkcity": this.form.selectRegion,
					"jlqzxzyq": this.form.salary,
				}).then(res => {
					console.log('求职：',res)
					uni.navigateTo({
						url: '/pages/Practitioner/personMesume/personMesume'
					});
				})				

			},
		// 移除已选职位
		removePosition(index) {
			// this.pickerShow = 'false'
			console.log('position:', index)
			this.form.position.splice(index, 1)
			// 同步更新默认选中项
			// this.positionDefaultIndex = this.positionOptions
			// 	.map((item, idx) => this.selectedPositions.includes(item.name) ? idx : -1)
			// 	.filter(idx => idx !== -1)
		},
		removeRegion(index) {
			this.form.selectRegion.splice(index, 1)
		}
	}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;


		.slot-btn {
			width: 104px;
			height: 104px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
			margin-left: 10px;
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.form-section {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-content: flex-start;
				align-items: center;


				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;

					.required {
						color: #f56c6c;
						margin-right: 8rpx;
					}
				}

				.section-subtitle {
					font-size: 26rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 8rpx;
				}
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 350px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}

		// 期望职位多选样式
		.select-box {
			margin-bottom: 40rpx;
			display: flex;
			border-bottom: 1rpx solid #ebebeb;
			align-items: center;
			pointer-events: none;


			.select-label {
				width: 124px
			}

			.label {
				font-size: 30rpx;
				color: #333;

				// margin-bottom: 15rpx;

				// display: block;
			}

			.select-input {
				width: 100%;
				align-items: center;
				padding: 20rpx;
				// border: 1rpx solid #e0e0e0;
				border-radius: 8rpx;
				min-height: 80rpx;
				pointer-events: auto;

				.tags-container {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;

					.tag {
						display: flex;
						align-items: center;
						background-color: #f7f7f7;
						border-radius: 30rpx;
						padding: 8rpx 15rpx;
						font-size: 26rpx;
						

						.u-icon {
							margin-left: 8rpx;
						}
					}

					.placeholder {
						font-size: 28rpx;
						color: #d4d4d4;
						text-align: center;
					}
				}

				.u-icon {
					margin-left: 15rpx;
				}
			}
		}
		
		.select-box > * {
			pointer-events: auto;
		}

		/* 解决点击穿透问题 */
		.u-popup {
			z-index: 10000;
		}
	}
</style>